<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="姓名" prop="realName">
            <Input
              type="text"
              v-model="searchForm.realName"
              placeholder="请输入姓名"
              :maxlength="10"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="手机号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              :maxlength="11"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Row class="operation padding-row">
        <Button @click="handleAdd" type="error">新增</Button>
        <Button @click="batchDel">删除</Button>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
        @on-selection-change="changeSelect"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>

    <!-- 新增、编辑模态框 -->
    <Modal v-model="editFlag" :title="editForm.id ? '编辑' : '新增'">
      <Form ref="editForm" :model="editForm" :rules="rules" :label-width="80">
        <FormItem label="姓名" prop="realName" style="width: 100%">
          <Input v-model="editForm.realName" :maxlength="10" placeholder="请输入姓名" />
        </FormItem>
        <FormItem label="手机号" prop="mobile" style="width: 100%">
          <Input v-model="editForm.mobile" :maxlength="11" placeholder="请输入手机号" />
        </FormItem>
        <FormItem label="身份证号" prop="idCard" style="width: 100%">
          <Input v-model="editForm.idCard" :maxlength="18" placeholder="请输入身份证号" />
        </FormItem>
        <FormItem v-if="!editForm.id" label="密码" prop="password" style="width: 100%">
          <Input type="password" v-model="editForm.password" placeholder="请输入密码" />
        </FormItem>
        <FormItem label="所属场地" prop="siteId" style="width: 100%">
          <Select
            v-model="editForm.siteId"
            placeholder="请选择所属场地"
            clearable
            @on-change="changeSite"
            style="width: 100%"
          >
            <Option v-for="(item, k) in yardList" :key="k" :value="item.id">{{
              item.siteName
            }}</Option>
          </Select>
        </FormItem>
        <FormItem label="个人简介" prop="introduction" style="width: 100%">
          <Input
            v-model="editForm.introduction"
            type="textarea"
            :maxlength="100"
            :rows="4"
            placeholder="请输入个人简介"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="editFlag = false">取消</Button>
        <Button type="primary" @click="submitForm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Person from "@/api/person.js";
import * as RegExp from "@/libs/RegExp.js";

export default {
  name: "person-nurse",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        realName: "", // 姓名
        mobile: "", //手机号
      },
      selectList: [], // 多选数据
      yardList: [], //场地列表
      editFlag: false, // 编辑弹窗
      editForm: {
        id: "",
        realName: "", // 姓名
        mobile: "", // 手机号
        idCard: "", //身份证号
        password: "", // 密码
        introduction: "", // 个人简介
        siteId: "", // 所属场地ID
        siteName: "", // 所属场地名称
      }, // 编辑表单
      rules: {
        // 验证规则
        realName: [{ required: true, message: "请输入姓名" }],
        mobile: [
          { required: true, message: "请输入手机号码" },
          {
            pattern: RegExp.mobile,
            message: "请输入正确的手机号",
          },
        ],
        password: [{ required: true, message: "请输入密码" }],
        idCard: [
          { required: true, message: "请输入身份证号" },
          {
            pattern: RegExp.IDCard,
            message: "请输入正确的身份证号",
          },
        ],
        siteId: [{ required: true, message: "请选择场地", trigger: "change" }],
      },
      columns: [
        // 表头
        { type: "selection", width: 60, align: "center" },
        { title: "序号", width: 100, type: "index", minWidth: 120, tooltip: true },
        { title: "姓名", key: "realName", minWidth: 120, tooltip: true },
        { title: "手机号", key: "mobile", minWidth: 120, tooltip: true },
        { title: "身份证号", key: "idCard", minWidth: 180, tooltip: true },
        { title: "所属场地", key: "siteName", minWidth: 180, tooltip: true },
        { title: "个人简介", key: "introduction", minWidth: 300, tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "primary", size: "small" },
                  on: {
                    click: () => {
                      this.handleEdit(params.row);
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  watch: {
    editFlag(v) {
      if (!v) {
        this.editForm = {
          id: "",
          realName: "", // 姓名
          mobile: "", // 手机号
          idCard: "", //身份证号
          password: "", // 密码
          introduction: "", // 个人简介
          siteId: "", // 所属场地ID
          siteName: "", // 所属场地名称
        };
        setTimeout(() => {
          this.$refs.editForm.resetFields();
        }, 0);
      }
    },
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    // 多选
    changeSelect(e) {
      this.selectList = e;
    },
    // 新增
    handleAdd() {
      this.editFlag = true;
    },
    // 修改
    handleEdit(v) {
      Object.keys(this.editForm).map((i) => {
        this.editForm[i] = v[i] || v[i] == 0 ? v[i] : "";
      });
      delete this.editForm.password;
      this.editFlag = true;
    },
    // 选择场地
    changeSite(v) {
      let item = this.yardList.find((i) => v == i.id);
      this.editForm.siteName = item.siteName;
    },
    // 批量删除
    batchDel() {
      if (this.selectList.length) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>您确认要删除所选的" + this.selectList.length + "条数据？</p>",
          onOk: () => {
            let ids = this.selectList
              .map((i) => {
                return i.id;
              })
              .join(",");
            API_Person.delNurse({ ids }).then((res) => {
              if (res.success) {
                this.$Message.success("删除成功");
                this.getData();
              }
            });
          },
        });
      } else {
        this.$Message.warning("请先勾选数据");
      }
    },
    // 获取场地列表
    getYard() {
      API_Person.getYardList()
        .then((res) => {
          if (res.success) {
            this.yardList = res.result;
          }
        })
        .finally(() => {});
    },
    // 查询护士列表
    getData() {
      this.loading = true;
      API_Person.postNursePage(this.searchForm)
        .then((res) => {
          if (res.result.records) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 提交
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if (this.editForm.id) {
            API_Person.postNurseUpdate(this.editForm).then((res) => {
              if (res.success) {
                this.$Message.success("编辑成功");
                this.editFlag = false;
                this.getData();
              }
            });
          } else {
            this.editForm.password = this.md5(this.editForm.password);
            API_Person.postNurseAdd(this.editForm).then((res) => {
              if (res.success) {
                this.$Message.success("新增成功");
                this.editFlag = false;
                this.getData();
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    this.getYard();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
</style>
